<template>
    <div id="contain">
        <div>
            <el-table
                :data="tableList"
                style="width: 945px"
                stripe
                :row-style="rowStyle"
            >
                <el-table-column
                    prop="orderId"
                    label="订单号"
                    width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="hotelName"
                    label="酒店名"
                    width="180"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="220"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="singleNum"
                    label="单人间"
                    width="80"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="doubleNum"
                    label="双人间"
                    width="80"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="manyNum"
                    label="多人间"
                    width="80"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="economyNum"
                    label="经济间"
                    width="80"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="vipNum"
                    label="套房"
                    width="80"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="expireTime"
                    label="过期时间"
                    width="220"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="pay"
                    label="应付金额"
                    width="100"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.pay">{{
                            scope.row.pay + '￥'
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="250">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.status === 0"
                            type="mini"
                            style="color: red"
                            @click="clear(scope.row)"
                            >取消订单</el-button
                        >
                        <el-button
                            v-if="scope.row.status === 0"
                            type="mini"
                            @click="edit(scope.row)"
                            >修改</el-button
                        >
                        <el-button
                            v-if="scope.row.status === 0"
                            type="mini"
                            @click="zhifu(scope.row)"
                            >去支付</el-button
                        >
                        <el-button
                            size="mini"
                            @click="chakan(scope.row)"
                            v-if="scope.row.status === 1"
                            >查看</el-button
                        >
                        <el-button
                            size="mini"
                            type="primary"
                            @click="wancheng(scope.row)"
                            v-if="scope.row.status === 1"
                            >确认完成</el-button
                        >
                        <el-button
                            v-if="scope.row.status === 3"
                            size="mini"
                            type="primary"
                            @click="pingjia(scope.row)"
                            >去评价</el-button
                        >
                        <el-button
                            v-if="scope.row.status === 4"
                            size="mini"
                            type="info"
                            @click="shanping(scope.row)"
                            >删除评论</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item
                    label="评论"
                    :label-width="formLabelWidth"
                    v-if="form.status === 4"
                >
                    <span>{{ form.content }}</span>
                </el-form-item>
                <el-form-item
                    label="单人间"
                    :label-width="formLabelWidth"
                    v-if="form.status === 0"
                >
                    <el-input-number
                        v-model="form.singleNum"
                        :min="0"
                    ></el-input-number>
                </el-form-item>
                <el-form-item
                    label="双人间"
                    :label-width="formLabelWidth"
                    v-if="form.status === 0"
                >
                    <el-input-number
                        v-model="form.doubleNum"
                        :min="0"
                    ></el-input-number>
                </el-form-item>
                <el-form-item
                    label="多人间"
                    :label-width="formLabelWidth"
                    v-if="form.status === 0"
                >
                    <el-input-number
                        v-model="form.manyNum"
                        :min="0"
                    ></el-input-number>
                </el-form-item>
                <el-form-item
                    label="经济间"
                    :label-width="formLabelWidth"
                    v-if="form.status === 0"
                >
                    <el-input-number
                        v-model="form.economyNum"
                        :min="0"
                    ></el-input-number>
                </el-form-item>
                <el-form-item
                    label="套房"
                    :label-width="formLabelWidth"
                    v-if="form.status === 0"
                >
                    <el-input-number
                        v-model="form.vipNum"
                        :min="0"
                    ></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="float: right; margin: 0 15px"
                        @click="dialogFormVisible = false"
                        >取 消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="submit2"
                        style="float: right"
                        >确 定</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="填写评价" :visible.sync="dialog">
            <el-form :model="form2">
                <el-form-item label="满意度" :label-width="formLabelWidth">
                    <el-radio-group v-model="form2.satisfaction">
                        <el-radio :label="0">不满意</el-radio>
                        <el-radio :label="1">一般</el-radio>
                        <el-radio :label="2">满意</el-radio>
                        <el-radio :label="3">非常满意</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="具体评价内容"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        type="textarea"
                        :rows="8"
                        v-model="form2.content"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="submitpingjia"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'hotelOrderList',
    props: {
        index: {
            type: String,
        },
    },
    data() {
        return {
            token: window.localStorage.getItem('token'),
            tableList: [],
            status: '',
            form: {},
            form2: {},
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialog: false,
        };
    },
    watch: {
        index(a, b) {
            this.status = this.index;
            this.queryOrderList();
        },
    },
    mounted() {
        this.status = this.index;
        this.queryOrderList();
    },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    if (this.goPay) {
      localStorage.setItem("query", JSON.stringify(from.query));
      localStorage.setItem("path", from.path);
      next();
    } else {
      next();
    }
  },
    methods: {
        queryOrderList() {
            let that = this;
            this.$axios({
                method: 'post',
                url: '/order/list/current',
                headers: { token: this.token },
                data: { type: 2 },
            }).then((res) => {
                if (res.data.code === 0) {
                    that.tableList = [];
                    let list = res.data.page;
                    list.forEach((item) => {
                        if (item.status === +that.status) {
                            that.tableList.push(item);
                        }
                    });
                }
            });
        },
        rowStyle() {
            return { height: '60px' };
        },
        edit(k) {
            //   console.log(k);
            this.dialogFormVisible = true;
            this.form = JSON.parse(JSON.stringify(k));
        },
        chakan(k) {
            this.dialogFormVisible = true;
            this.form = k;
        },
        wancheng(k) {
            this.$axios({
                method: 'post',
                url: '/order/status',
                headers: { token: this.token },
                data: { orderId: k.orderId, status: 3 },
            }).then((res) => {
                // console.log(res);
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '确认订单完成！',
                    });
                    this.queryOrderList();
                }
            });
        },
        pingjia(k) {
            this.dialog = true;
            this.orderId = k.orderId;
            this.goodsId = k.goodsId;
            this.orderId = k.orderId;
        },
        submitpingjia() {
            let that = this;
            this.dialog = false;
            this.$axios({
                method: 'post',
                url: '/review/add',
                headers: { token: this.token },
                data: {
                    orderId: this.orderId,
                    goodsId: this.goodsId,
                    satisfaction: this.form2.satisfaction,
                    content: this.form2.content,
                },
            }).then((res) => {
                if (res.data.code === 0) {
                    that.$message({
                        type: 'success',
                        message: '评价成功！',
                    });
                    that.queryOrderList();
                }
            });
        },
        shanping(k) {
            this.$axios({
                method: 'post',
                url: '/review/del',
                headers: { token: this.token },
                data: {
                    id: k.reviewId,
                },
            }).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除评论完成！',
                    });
                    this.queryOrderList();
                }
            });
        },
        clear(k) {
            this.$axios({
                method: 'post',
                url: '/order/cancel',
                headers: { token: this.token },
                data: { orderId: k.orderId },
            }).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '取消订单成功！',
                    });
                    this.queryOrderList();
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                    });
                }
            });
        },
        zhifu(k) {
            //   console.log(k);
            let data = {
                out_trade_no: k.orderId + '',
                subject: k.hotelName,
                total_amount: k.pay + '',
            };
            //   console.log(data);
            this.$router.push({ path: 'zhifu', query: data });
        },
        submit2() {
            this.dialogFormVisible = false;
            this.$axios({
                method: 'post',
                url: '/order/edit',
                headers: { token: this.token },
                data: {
                    orderId: this.form.orderId + '',
                    chNum: this.form.chNum,
                    adNum: this.form.adNum,
                },
            }).then((res) => {
                if (res.data.code === 500) {
                    this.dialogFormVisible = false;
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                    });
                }
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '修改成功！',
                    });
                    this.queryOrderList();
                }
            });
        },
    },
};
</script>
<style  scoped>
</style>>
